<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../../css/reset.css" />
		<link rel="stylesheet" href="../../../css/cmms.css" />
		<link rel="stylesheet" href="../../../css/mui.picker.min.css" />
		<link rel="stylesheet" href="../../../css/iconfont.css" />
		<script src="../../../js/vconsole.min.js"></script>
	</head>
	<style type="text/css">
		p,input{
			margin: 0;
		}
		input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea{
			margin: 0;
			text-align: left;
		}
		#editNotice{
			position: relative;
		}
		.darkC{
			color: #333;
		}
		.lightC{
			color: #C2C2C2;
		}
		.blueC{
			color: #00507E;
		}
		.mediumC{
			color: #808080;
		}
		#editNotice .mui-bar{
			background-color: #00507E;
		}
		#editNotice .mui-bar>a{
			color: #fff;
		}
		#editNotice .mui-bar>h1{
			color: #fff;
		}
		#editNotice .mui-bar>a.mui-pull-right{
			font-size: 16px;
			line-height: 24px;
		}
		#refreshContainer{
			position: absolute;
			top: 45px;
			width: 100%;
			padding: 5px;
		}
		#editNotice .noticeType{
			padding: 8px;
		}
		#editNotice .noticeType>p{
			font-size: 15px;
			color: #333;
			font-weight: 500;
			display: flex;
			line-height: 30px;
		}
		#editNotice .noticeType>p:nth-child(2){
			padding: 0 15px;
			justify-content: space-between;
		}
		#editNotice .noticeType>p>span{
			margin-right: 25px;
			color: #A8ACB3;
		}
		#editNotice .noticeType>p>span.selBlue{
			color: #3985BE;
		}
		#editNotice .dateBox{
			padding: 8px;
			display: flex;
			justify-content: space-between;
		}
		#editNotice .dateBox>label{
			font-size: 15px;
			color: #333;
			font-weight: 500;
			line-height: 30px;
		}
		#editNotice .dateBox>div{
			display: flex;
			justify-content: space-around;
			line-height: 30px;
			width: 75%;
			color: #A8ACB3;
		}
		#editNotice .dateBox>div>span{
			width: 60px;
			text-align: center;
			display: inline-block;
			color: #A8ACB3;
		}
		#editNotice .dateBox>div>i{
			color: #3985BE;
		}
		#editNotice .remark{
			padding: 10px;
			display: flex;
		}
		#editNotice .remark>span{
			width: 50px;
			font-size: 15px;
			color: #333;
			font-weight: 500;
			display: block;
		}
		#editNotice .remark textarea{
			padding: 5px;
			font-size: 14px;
			height: 80px;
			border:none;
		}
		.btnBox{
			text-align: center;
			/* margin-top: 20px; */
			margin: 20px 0;
		}
		.btnBox>.submit-btn{
			width: 340px;
			padding: 0;
			margin: 0 auto;
			border: 0;
			font-size: 16px;
			background-color: #42A3FF;
		}
		.redTip{
			position: relative;
			padding-left:10px; 
		}
		.redTip::before{
			content: '*';
			display: block;
			color: red;
			width: 10px;
			position: absolute;
			left: 0;
			top: 0px;
		}
		.dateBox .beginTime,.dateBox .endTime{
			border-color: #3985BE;
			padding: 0px 10px;
			color: #3985BE;
			margin-top: 3px;
			width: 60%;
		}
		.dateBox .beginTime i,.dateBox .endTime i{
			margin-left: 5px;
		}
	</style>
	<body>
		<div id="editNotice">
			<header class="mui-bar mui-bar-nav ">
			    <a id="icon-menu" class="mui-icon mui-icon-left-nav mui-pull-left" @tap="backIndex"></a>
			    <!-- <a class="mui-icon mui-pull-right">编辑</a> -->
			    <h1 class="mui-title">{{topTitle}}</h1>
			</header>
			<div id="refreshContainer" :style="contentStyleObj">
				<div class="panel">
					<div class="noticeType">
						<p class="redTip">通知方式</p>
						<p>
							<span @tap="selectWX" :class="{'selBlue':wxShow}"><i class="iconfont icon-tubiaozhizuomoban"
									:class="{'icon-xuanzhong':wxShow}"></i>微信</span>
							<span @tap="selectAPP" :class="{'selBlue':appShow}"><i class="iconfont icon-tubiaozhizuomoban"
									:class="{'icon-xuanzhong':appShow}"></i>APP</span>
							<span @tap="selectDX" :class="{'selBlue':dxShow}"><i class="iconfont icon-tubiaozhizuomoban"
									:class="{'icon-xuanzhong':dxShow}"></i>短信</span>
						</p>
					</div>
					<div class="dateBox">
						<label class="redTip">通知时间</label>
						<div>
							<button type="button" class="beginTime mui-btn mui-btn-primary mui-btn-outlined" @tap="selectStart">{{beginTime}}<i class="icon iconfont icon-jiantou right"></i></button>
							<span>——</span>
							<button class="endTime mui-btn mui-btn-primary mui-btn-outlined" @tap="selectEnd">{{endTime}}<i class="icon iconfont icon-jiantou right"></i></button>
							<!-- <i class="icon iconfont icon-date right"></i> -->
						</div>
					</div>
					<div class="remark">
						<span>备注</span>
						<textarea class="content" placeholder="请输入备注" v-model="remark"></textarea>
					</div>
				</div>
				<div class="btnBox">
					<button class="submit-btn" id="submitNotice" @tap="saveNotice">保存</button>
				</div>
			</div>
		</div>
		<script src="../../../js/mui.min.js"></script>
		<script src="../../../js/vue.js"></script>
		<script src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
		<script src="../../../js/mui.picker.min.js"></script>
		<script src="../../../js/cmms.js?time=222"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<script type="text/javascript">
			new Vue({
				el:"#editNotice",
				data(){
					return{
						remark:'',
						wxShow:false,
						appShow:false,
						dxShow:false,
						token:'',
						topTitle:'通知配置',
						noticeList:[],
						refresh:true,
						pullDirection:'',
						contentStyleObj:{
							height:''
						},
						beginTime:'开始时间',
						endTime:'结束时间',
						dataList:[
							{
								"beginTime": '',
								"code": 0,
								"endTime":'',
								"remark": ""
							}
						],
						codeList:[]
					}
				},
				created(){
					let self = this;
					window.addEventListener('resize', self.getHeight);
					self.getHeight()
				},
				filters:{
					appType:function(value){
						switch(value){
							case '1':
								return '短信';
								break;
							case '2':
								return '微信';
								break;
							case '3':
								return 'APP';
								break;
						}
					}
				},
				mounted(){
					// var vConsole = new VConsole();
					this.getPage();
				},
				methods:{
					getPage(){
						let noticeList = JSON.parse(localStorage.getItem('noticeList')) ;					
						if(noticeList&&noticeList.length>0){
							this.remark = noticeList[0].remark;
							let time = noticeList[0].time;
							if(time){
								this.beginTime = time.split('-')[0];
								this.endTime = time.split('-')[1];
								
							}
						}
						console.log(noticeList)
						let arr = [];
						
						let appIndex = noticeList.findIndex(target=>target.code==1);
						let wxIndex= noticeList.findIndex(target=>target.code==2);
						let dxIndex = noticeList.findIndex(target=>target.code==3);
						if(wxIndex!=-1){
							this.wxShow = true;
							this.codeList.push(2);
						}
						if(appIndex!=-1){
							this.appShow = true;
							this.codeList.push(3);
						}
						if(dxIndex!=-1){
							this.dxShow = true;
							this.codeList.push(1);
						}
					},
					getHeight(){
						this.contentStyleObj.height=window.innerHeight-45+'px';
						console.log(this.contentStyleObj.height)
					},
					selectStart(){
						let _this = this;
						_this.loadLabel='start';
						var dtpicker = new mui.DtPicker({
							type:'time'
						});
						dtpicker.show(function(e) {
						    console.log(e);
								console.log(_this.compareDate(_this.beginTime,_this.endTime))
							_this.beginTime = e.h.value+':'+e.i.value;
							if(_this.compareDate(_this.beginTime,_this.endTime)){
								console.log(111)
								alert('开始时间不能大于结束时间');
								_this.beginTime = '结束时间';
							}else{
								console.log(222)
							}
							dtpicker.dispose();
						}) ;
					},
					selectEnd(){
						let _this = this;
						_this.loadLabel='end';
						var dtpicker = new mui.DtPicker({
							type:'time'
						});
						dtpicker.show(function(e) {
						    console.log(e);
								console.log(_this.compareDate(_this.beginTime,_this.endTime))
								_this.endTime = e.h.value+':'+e.i.value;
							if(_this.compareDate(_this.beginTime,_this.endTime)){
								console.log(111)
								alert('开始时间不能大于结束时间');
								_this.endTime = '结束时间';
							}else{
								console.log(222)
							}
							dtpicker.dispose();
						}) ;
					},
					selectWX(){
						console.log(this.wxShow)
						if(this.wxShow){
							this.wxShow = false;
							let index = this.codeList.findIndex(target=>target==2);
							if(index!=-1){
								this.codeList.splice(index,1);
								console.log(this.codeList)
							}
						}else{
							this.wxShow = true;
							this.codeList.push(2);
							console.log(this.codeList)
						}
					},
					selectAPP(){
						if(this.appShow){
							this.appShow = false;
							let index = this.codeList.findIndex(target=>target==3);
							if(index!=-1){
								this.codeList.splice(index,1);
								console.log(this.codeList)
							}
						}else{
							this.appShow = true;
							this.codeList.push(3);
							console.log(this.codeList)
						}
					},
					selectDX(){
						if(this.dxShow){
							this.dxShow = false;
							let index = this.codeList.findIndex(target=>target==1);
							if(index!=-1){
								this.codeList.splice(index,1);
								console.log(this.codeList)
							}
						}else{
							this.dxShow = true;
							this.codeList.push(1);
							console.log(this.codeList)
						}
					},
					backIndex(){
						location.href = './noticeList.html';
					},
					saveNotice(){
						console.log(1231)
						// return;
						let _this = this;
						let codeList = this.codeList;
						console.log(this.codeList)
						let dataArr = [];
						let flag = true;
						if(codeList.length>0){
							for(let i=0;i<codeList.length;i++){
								let obj = {
									"beginTime": _this.beginTime,
									"code": codeList[i],
									"endTime":_this.endTime,
									"remark": _this.remark
								};
								if(obj.beginTime=='开始时间'){
									flag = false
									mui.toast('开始时间不能为空！');
									return;
								}else if(obj.endTime=='结束时间'){
									flag = false
									mui.toast('开始时间不能为空！');
									return;
								}
								dataArr.push(obj);
							}
							console.log(flag)
							console.log(dataArr)
						}else{
							mui.toast('通知方式不能为空！');
							flag = false;
						}
						if(flag){
							mui("#submitNotice").button('loading');
							_this.dataList = dataArr;
							AT.muiAjax('/partner-sale/orderReportConfig/save','post',{
								"list": _this.dataList,
								"userType": 2
							},function(res){
								console.log(res)
								mui.toast(res);
								var timer = setTimeout(function(){
										location.href = 'noticeList.html';
										mui("#submitNotice").button('reset');
										clearTimeout(timer);
								},1000);
							});
						}else{
							console.log(132132)
						}
					},
					compareDate(t1,t2){
						let date = new Date();
						let a = t1.split(":");
						let b = t2.split(":");
						return date.setHours(a[0],a[1]) > date.setHours(b[0],b[1]);
					}
				}
			})
		</script>
	</body>
</html>
